<template>
  <view class="search_wrap">
    <z-nav-bar id="nav" bgColor="#ffffff" >
      <view slot="right" class="df">
        <view class="flex1" style="width: 450rpx">
          <up-search placeholder="请输入店铺名称" v-model="keyword" :showAction="false"></up-search>
        </view>
      </view>
    </z-nav-bar>
    <!-- 筛选 -->
    <view class="rubric-tab flex-center-between" :style="[rubricMask?{background:'#fff'}:{background: 'linear-gradient(180deg, #fff 0%, #fff 70%,#F6F6F6 100%)'},{paddingTop:statusBarHeight+56+'px'}]">
      <view class="flex-aj-center" :class="rubric1?'rubric-active':''" @tap="rubric(1)">
        <text class="name">全市</text>
        <view v-if='!rubric1' class="triangle"></view>
        <view v-else class="triangle-active"></view>
      </view>
      <view class="flex-aj-center" :class="rubric2?'rubric-active':''" @tap="rubric(2)">
        <text class="name">销量</text>
        <view v-if='!rubric2' class="triangle"></view>
        <view v-else class="triangle-active"></view>
      </view>
      <view class="flex-aj-center" :class="rubric3?'rubric-active':''" @tap="rubric(3)">
        <text class="name">星评</text>
        <view v-if='!rubric3' class="triangle"></view>
        <view v-else class="triangle-active"></view>
      </view>
      <view class="flex-aj-center" @tap="rubric(4)">
        <image style="width: 32rpx;height: 32rpx" src="./static/icon_sort.png" mode=""></image>
      </view>
    </view>
   <!-- 蒙版层 -->
    <view class="shop-box">
      <view class="shop-item" v-for="(item,index) in shopList" :key="index">
        <navigator class="flex" :url="'/pagesShop/shop_details?storeId='+item.storeId">
          <image class="shopImg" :src="item.cover" mode=""></image>
          <view class="refer">
            <view class="refer-item1 flex-center-between">
              <text class="text-ellipsis ellip1">{{item.storeName}}</text>
              <image v-if="item.isCollect==0" src="http://www.xvopen.com/xiaoV/img1/heart-full.png" mode=""></image>
              <image v-else src="http://www.xvopen.com/xiaoV/img1/heart.png" mode=""></image>
            </view>
            <view class="refer-item2 flex-center-between">
              <text class="text-ellipsis ellip2">店铺简介：{{item.introduction||'暂无'}}</text>
              <text>{{item.collectNumber}}人收藏过</text>
            </view>
            <view class="refer-item3 flex-center-between">
              <view>
                <star :starRate="item.star"></star>
                <view class="distance flex-a-center">
                  <image class="add" src="http://www.xvopen.com/xiaoV/img1/add.png" mode=""></image>
                  {{item.distance}}km
                </view>
              </view>
              <view class="btn">
                <main-button :fontSize="'24rpx'" :height="'48rpx'" :width="'144rpx'">一键下单</main-button>
              </view>
            </view>
          </view>
        </navigator>
      </view>
    </view>
		<view v-if="rubricMask" class="co-popup" :style="{top:statusBarHeight+88+'px'}">
			<view class="co-popup-mask" @tap="cancel"></view>
			<view class="content">
				<view v-if="rubric1" class="main-cont flex animated fadeIn faster">
					<view class="left">
						区域
					</view>
					<scroll-view class="right" scroll-y="true" >
						<view class="right-item" v-for="(item,index) in rubric1List" :key="index" :class="rubric1Index==index?'right-item-active':''" @tap="itemClick(1,index,item.id)">{{item.cityName}}</view>
					</scroll-view>
				</view>
				<view v-if="rubric2" class="main-cont flex animated fadeIn faster">
					<scroll-view class="right" scroll-y="true" >
						<view class="right-item flex-aj-center" v-for="(item,index) in rubric2List" :key="index" :class="rubric2Index==index?'right-item-active':''" @tap="itemClick(2,index)">{{item}}</view>
					</scroll-view>
				</view>
				<view v-if="rubric3" class="main-cont flex animated fadeIn faster">
					<scroll-view class="right" scroll-y="true" >
						<view class="right-item flex-aj-center" v-for="(item,index) in rubric3List" :key="index" :class="rubric3Index==index?'right-item-active':''" @tap="itemClick(3,index)">{{item}}</view>
					</scroll-view>
				</view>
				<view v-if="rubric4" class="main-cont flex animated fadeIn faster">
					<scroll-view class="right" scroll-y="true" >
						<view class="right-item flex-aj-center" v-for="(item,index) in rubric4List" :key="index" :class="rubric4Index==index?'right-item-active':''" @tap="itemClick(4,index)">{{item}}</view>
					</scroll-view>
				</view>
				<view class="btn-box">
					<main-button :color="'#fff'" :margin="'0'" @click="confirm">确认</main-button>
				</view>
			</view>
		</view>

  </view>
</template>

<script setup>
import {ref} from "vue"
import { systemStore } from '@/stores/system'
import { commonStore } from '@/stores/common'
import {cityCityId} from '@/api/city'
const SystemStore =systemStore()
const CommonStore =commonStore()
const keyword = ref("")
const statusBarHeight = ref('')
const rubricMask= ref(false)
const rubric1 = ref(false)
const rubric2 = ref(false)
const rubric3 = ref(false)
const rubric4 = ref(false)
const rubric1List =ref([])
const rubric2List =ref(['销量从低到高','销量从高到低'])
const rubric3List =ref(['星评从低到高','星评从高到低'])
const rubric4List =ref(['距离最近','收藏从高到低'])
  // regionCode:null
console.log(SystemStore.statusBarInfo,'SystemStore.statusBarInfo.statusBarHeight')
 statusBarHeight.value = SystemStore.statusBarInfo.statusBarHeight
const rubric =(index)=>{
   rubricMask.value = true
   switch (index) {
     case 1:
       rubric1.value = true
       rubric2.value = false
       rubric3.value = false
       rubric4.value = false
       break
     case 2:
       rubric1.value = false
       rubric2.value = true
       rubric3.value = false
       rubric4.value = false
       break
     case 3:
       rubric1.value = false
       rubric2.value = false
       rubric3.value = true
       rubric4.value = false
       break
     case 4:
       rubric1.value = false
       rubric2.value = false
       rubric3.value = false
       rubric4.value = true
       break
   }
}
const getCityList =()=>{
  cityCityId(CommonStore.cityInfo.cityCode).then(res=>{
    rubric1List.value = res
  })
}
const confirm = ()=>{
  rubricMask.value = false
  rubric1.value= false
  rubric2.value = false
  rubric3.value = false
  rubric4.value = false
}
/****自执行方法**********/
getCityList()
</script>

<style lang="scss">
.search_wrap{
  .uDropdownRef_wrap{
    width: 100%;
  }
}
.rubric-tab{
  width: 750rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8;
  padding: 0 40rpx 34rpx;
  view{
    color: #000;
    image{
      width: 20rpx;
      height: 22rpx;
    }
    .triangle {
      width: 0;
      height: 0;
      border-top: 10rpx solid #747474;
      border-right: 10rpx solid transparent;
      border-left: 10rpx solid transparent;
      border-bottom: 10rpx solid transparent;
      border-radius: 5rpx 5rpx 0 0;
      margin: 10rpx 0 0 4rpx;
    }
  }
}
.rubric-active{
  .name{
    color: #009AE8;
  }
  .triangle-active {
    width: 0;
    height: 0;
    border-top: 10rpx solid transparent;
    border-right: 10rpx solid transparent;
    border-left: 10rpx solid transparent;
    border-bottom: 10rpx solid #009AE8;
    border-radius: 5rpx 5rpx 0 0;
    margin: 0 0 10rpx 4rpx;
  }
}
.co-popup{
		align-items: flex-start;
		.content{
			width: 750rpx;
			position: relative;
			z-index: 100;
			background-color: #fff;
			color: #000;
			.main-cont{
				height: 791rpx;
				.left{
					width: 237rpx;
					background-color: #F3F3F3;
					padding: 24rpx 40rpx;
				}
				.right{
					padding: 24rpx 48rpx;
					.right-item{
						margin-bottom: 24rpx;
						color: #666;
					}
					.right-item-active{
						color: #009AE8;
					}
				}
			}
			.btn-box{
				padding: 30rpx 40rpx;
				border-top: 1rpx solid rgba(229, 229, 229, 0.6);
			}
		}
	}

</style>
